<template>
	<view class="u-char-box ">
		<view class="u-char-flex ">
			<input @input="getVal" class="u-input " :disabled="disabledKeyboard" :focus="focus" :maxlength="maxlength" type="number" :value="valueModel" />
			<view class="" v-for="(item, index) in loopCharArr" :key="index">
				<view
					:class="[
						'',
						breathe && charArrLength == index ? 'u-breathe' : '',
						'u-char-item',
						charArrLength === index && mode == 'box' ? 'u-box-active' : '',
						mode === 'box' ? 'u-box' : ''
					]"
					:style="
						'font-weight:' +
							(bold ? 'bold' : 'normal') +
							';' +
							'font-size:' +
							fontSize +
							'rpx' +
							';' +
							'width:' +
							width +
							'rpx' +
							';' +
							'height:' +
							width +
							'rpx' +
							';' +
							'color:' +
							inactiveColor +
							';'
					"
				>
					<view class="u-placeholder-line " :style="{ display: charArrLength === index ? 'block' : 'none', height: width * 0.5 + 'rpx' }" v-if="mode !== 'middleLine'"></view>
					<view
						:class="['u-middle-line', '', breathe && charArrLength == index ? 'u-breathe' : '', charArrLength === index ? 'u-middle-line-active' : '']"
						:style="{ height: bold ? '4px' : '2px', background: charArrLength === index ? activeColor : inactiveColor }"
						v-if="mode === 'middleLine' && charArrLength <= index"
					></view>
					<view
						:class="['u-bottom-line', '', breathe && charArrLength == index ? 'u-breathe' : '', charArrLength === index ? 'u-buttom-line-active' : '']"
						:style="{ height: bold ? '4px' : '2px', background: charArrLength === index ? activeColor : inactiveColor }"
						v-if="mode === 'bottomLine'"
					></view>
					<block v-if="!dotFill">{{ '' + (charArr[index] ? charArr[index] : '') }}</block>
					<text class="u-dot " v-else>{{ charArr[index] ? '●' : '' }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'code-input',
	props: {
		maxlength: {
			type: [Number, String],
			default: 4
		},
		dotFill: {
			type: Boolean,
			default: !1
		},
		mode: {
			type: String,
			default: 'box'
		},
		value: {
			type: [String, Number],
			default: ''
		},
		breathe: {
			type: Boolean,
			default: !0
		},
		focus: {
			type: Boolean,
			default: !1
		},
		bold: {
			type: Boolean,
			default: !1
		},
		fontSize: {
			type: [String, Number],
			default: 60
		},
		activeColor: {
			type: String,
			default: '#FF3C47'
		},
		inactiveColor: {
			type: String,
			default: '#787880'
		},
		width: {
			type: [Number, String],
			default: '80'
		},
		disabledKeyboard: {
			type: Boolean,
			default: !1
		}
	},
	watch: {
		maxlength: {
			immediate: !0,
			handler: function(e) {
				this.maxlength = Number(e);
			}
		},
		value: {
			immediate: !0,
			handler: function(e) {
				(e = String(e)), (this.valueModel = e.substring(0, this.maxlength));
			}
		}
	},
	data: function() {
		return {
			valueModel: '',
			reqSwitch: !0
		};
	},
	computed: {
		animationClass: function() {
			var e = this;
			return function(t) {
				return e.breathe && e.charArr.length == t ? 'u-breathe' : '';
			};
		},
		charArr: function() {
			return this.valueModel.split('');
		},
		charArrLength: function() {
			return this.charArr.length;
		},
		loopCharArr: function() {
			return new Array(this.maxlength);
		}
	},
	methods: {
		getVal: function(e) {
			var t = e.detail.value;
			(this.valueModel = t),
				String(t).length > this.maxlength ||
					(this.$emit('change', t),
					String(t).length == this.maxlength && this.reqSwitch && (console.log('reqSwitch', this.reqSwitch), (this.reqSwitch = !1), this.$emit('finish', t)));
		}
	}
};
</script>

<style>
@-webkit-keyframes breathe {
	0% {
		opacity: 0.3;
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0.3;
	}
}

@keyframes breathe {
	0% {
		opacity: 0.3;
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0.3;
	}
}

.u-char-box {
	text-align: center;
}

.u-char-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	position: relative;
}

.u-input {
	background: none;
	height: 100%;
	left: -100%;
	opacity: 0;
	position: absolute;
	text-align: left;
	top: 0;
	width: 200%;
	z-index: 9;
}

.u-char-item {
	align-items: center;
	color: #303133;
	display: flex;
	font-size: 60rpx;
	font-weight: 700;
	height: 90rpx;
	justify-content: center;
	line-height: 90rpx;
	margin: 15rpx;
	position: relative;
	width: 90rpx;
}

.u-middle-line {
	border: none;
}

.u-box {
	border: 2rpx solid #ccc;
	border-radius: 6rpx;
	box-sizing: border-box;
}

.u-box-active {
	animation-direction: alternate;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	border: 2rpx solid #FF3C47;
	overflow: hidden;
}

.u-middle-line-active {
	background: #FF3C47;
}

.u-breathe {
	animation: breathe 2s ease infinite;
}

.u-placeholder-line {
	animation: twinkling 1.5s ease infinite;
	background: #333;
	display: none;
	height: 40rpx;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 2rpx;
}

.u-animation-breathe {
	animation-name: breathe-;
}

.u-dot {
	font-size: 34rpx;
	line-height: 34rpx;
}

.u-middle-line {
	background: #000;
	border-radius: 2px;
	height: 4px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
}

.u-buttom-line-active {
	background: #2979ff;
}

.u-bottom-line {
	background: #000;
	border-radius: 2px;
	bottom: 0;
	height: 4px;
	left: 50%;
	position: absolute;
	transform: translate(-50%);
	width: 80%;
}
</style>
